<template>
	<view class="cart-list">
		<view class="cart-list-nav">
			<view class="cart-list-title">已选商品</view>
			<view style="display: flex;" @click="emptycart">
				<uni-icons type="trash-filled" size="18" color="#AAAAAA"></uni-icons>
				<text class="cart-list-emptycart">清空</text>
			</view>
		</view>
		<scroll-view scroll-y="true" style="max-height: 60vh;">
			<!-- 商品列表循环开始 -->
			<view class="cart-list-goods" v-for="(item, i) in mycartlist.goods" :key="i">
				<view class="goodimg">
					<image :src="item.icon" class="img"></image>
				</view>
				<view class="content">
					<view>
						<view class="goodsname">
							{{ item.gname }}
						</view>
						<view class="goodscontent">
							{{ item.bcontent }}
						</view>
					</view>
					<view class="price-nums">
						<view>
							<text class="danwei">￥</text>
							<text class="price">{{item.buyPrice}}</text>
						</view>
						<view class="price-nums-modfiy">
							<uni-icons type="minus" size="27" color="#E60012" @click="subbuynum(i)"></uni-icons>
							<text style="margin: 0 15rpx;">{{item.buyNums}}</text>
							<uni-icons type="plus-filled" size="27" color="#E60012" @click="addbuynum(i)"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<!-- 商品列表循环结束 -->
		</scroll-view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		name: "cartlist",
		props: ['ccartlist'],
		data() {
			return {
				mycartlist: this.ccartlist
			};
		},
		mounted() {
			//console.log(this.mycartlist)
		},
		methods: {
			emptycart() {
				let that = this
				//判断是否清空
				uni.showModal({
					content: "确定清空购物车吗？",
					cancelText: "我再想想",
					confirmText: "确定",
					success: function(res) {
						if (res.confirm) {
							that.mycartlist.buyTotalNums=0
							that.mycartlist.allPrice=0
							that.mycartlist.goods=[]
							this.emitComputerPrice()
							// 清空购物车数据
							uni.request({
								url: app.globalData.baseUrl + "/cart/delcart/" + that.mycartlist.cartid
							})
						}
					}
					
				})
			},
			//注册事件
			emitComputerPrice() {
				uni.$emit('addcarts', this.mycartlist)
			},
			addbuynum(index) {
				this.mycartlist.goods[index].buyNums++
				this.sumCartAll()
				this.emitComputerPrice()
			},
			subbuynum(index) {
				// 大于时减一
				if (this.mycartlist.goods[index].buyNums > 0) {
					this.mycartlist.goods[index].buyNums--
					//如果为0,在购物车中删除
					if (this.mycartlist.goods[index].buyNums <= 0) {
						this.mycartlist.goods.splice(index, 1)
					}
					this.sumCartAll()
					this.emitComputerPrice()
				}
			},
			//购物车的合计
			sumCartAll() {
				let buyTotalNums = 0
				let allPrice = 0
				this.mycartlist.goods.forEach(item => {
					buyTotalNums += item.buyNums
					allPrice += item.buyNums * item.buyPrice
				})
				this.mycartlist.buyTotalNums = buyTotalNums
				this.mycartlist.allPrice = allPrice
			}
		}

	}
</script>

<style lang="scss">
	.cart-list {
		width: 100vw;
		box-sizing: border-box;
		background-color: #FFFFFF;
		padding: 20px 15px 80px 15px;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		z-index: 50;

		.cart-list-nav {
			width: 100%;
			height: 60rpx;
			display: flex;
			justify-content: space-between;

			.cart-list-title {
				font-size: 34rpx;
				font-weight: bold;
				color: #555555;
			}

			.cart-list-emptycart {
				font-size: 28rpx;
				color: #AAAAAA;
				line-height: 34rpx;
			}
		}

		.cart-list-goods {
			width: 100%;
			height: 135rpx;
			margin: 20rpx auto;
			display: flex;

			.goodimg {
				width: 21%;
				height: 135rpx;
				text-align: center;

				.img {
					width: 100%;
					height: 135rpx;
				}
			}

			.content {
				width: 79%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.goodsname {
					height: 45rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
				}

				.goodscontent {
					width: 100%;
					font-size: 22rpx;
					color: #888888;
				}

				.price-nums {
					width: 100%;
					display: flex;
					justify-content: space-between;
				}

				.danwei {
					font-size: 24rpx;
				}

				.price {
					font-size: 28rpx;
					padding-right: 5rpx;
				}

				.price-nums-modfiy {
					display: flex;
					justify-content: space-between;
					width: 170rpx;
					height: 48rpx;
					line-height: 48rpx;
					color: #555555;
				}
			}
		}
	}
</style>
